<template>
	<view class="page-body">
		<!--搜索-->
		<view style="padding: 0;">
			<searchbar :placeholder="'请输入关键字'" @confirm="onSearchConfirm()"></searchbar>
		</view>
		<view style="display: flex;overflow: hidden; padding-top: 20upx;" :style="'height:'+height +'px'">
			
		
		<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
			<block v-for="(item,index) in playList" :key="index">
				<view class="nav-left-item" @click="categoryClickMain(index,item.title)" :class="index==categoryActive?'active':''">
					{{item.title}}
				</view>
			</block>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y  scroll-with-animation>
			<view v-for="(item,index) in recommendTravels" :key="index" class="box" :style="item.servicesopen == '0'? 'border-left:3px solid #bababa':''" @click="goToTravel(item.id)">
				<view class="title" >
					<text>{{item.servicesname}}</text>
					<text v-if="item.servicesopen == '0'">未开放</text>
					<text v-if="item.servicesopen == '1'" style="color: #fff;background: #0092FF;">已开放</text>
					<!-- <image :src="item.listImage" style="width: 100%;height: 100%;"></image> -->
				</view>
				<view class="luduan" v-if="item.segmentname">
					<text>路段名称：{{item.segmentname}}</text>
				</view>
				<view class="fangxiang">
					<text>方向：{{item.direction}}</text>
				</view>
				<!-- <view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in foods.foods" :key="i" @click="cart(item.name)">
					<image :src="item.icon" />
					<view>{{item.name}}</view>
				</view> -->
			</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	import searchbar from "@/components/search-bar.vue"
	var currentPage2 = 1
	export default {
		components:{
			searchbar
		},
		data() {
			return {
				recommendTravels:[],
				citys:'',
				currentJiSanId:'',
				playList:[],
				name: "wkiwi",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				// classifyData:classifyData,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
			}
		},
		created(){
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			// this.$nextTick(()=>{
			// 	this.getHeightList();
			// })
		},
		onLoad: function () {
			currentPage2 = 1
			this.getNewDistributionList("旅游目的地")
			this.height = uni.getSystemInfoSync().windowHeight - 44 - this.tabBarHeight;
		},
		onReady() {
			// this.getHeightList();
		},
		methods: {
			onSearchConfirm: function(e) {
				this.recommendTravels = []
				console.log(e)
				// keyword = tempKeyword;
				this.keyword = e.detail.value
				currentPage2 = 1;
				this.isNoMore = false;
				this.getPeripheryLsit(this.citys,this.keyword);
			},
			getNewDistributionList: function(centreType){
				var that = this;
				var param = {
					channelType:'1',
					pageIndex: '1',
					pageSize:'100',
					centreType:centreType
				}
				
				this.$postApi(this.$path.GET_NEW_DESTINATION_LIST,param).then(res=>{
					console.log("目的地返回参数------------------->",res.data)
					// console.log(res)
					if (res.data.success) {
						this.playList = res.data.data.list
						var goods = this.playList.concat(res.data.data.list);
						this.currentJiSanId = this.playList[0].code
						this.citys = this.playList[0].title
						
						this.getPeripheryLsit(this.citys)
					}
				})
			},
			getPeripheryLsit:function(citys,keyword){
				var that = this
				// this.recommendTravels = []
				var param = {
					channelType: '1',
					pageIndex: currentPage2,
					pageSize: 10,
					// busid:currentJiSanId,
					// attribute:attribute,
					direction:citys,
					servicesname:keyword
				}
				this.$postApi(this.$path.SERVICE_INFO,param).then(res=>{
					// this.recommendTravels = []
							
					// this.recommendTravels = res.data.data.list
					
					console.log("返回服务列表-------------->",res.data)
					if (res.data.success) {
						let list = res.data.data.list
					
						if (currentPage2 == 1) {
							var content = list
						} else {
							var content = this.recommendTravels.concat(list)
						}
					
						var isNoMore = false
						var isEmpty = false
					
						if (content.length == 0) {
							isEmpty = true;
							isNoMore = false;
							console.log("content=0")
						} else if (!res.data.data.hasNextPage){
							console.log("hasNextPage = false")
							//已经无再多数据
							isNoMore = true;
							isEmpty = false;
						}
						currentPage2++;
						this.recommendTravels = content;
						this.isNoMore = isNoMore;
						this.isEmpty = isEmpty;
					}	
				})
			},
			categoryClickMain(index,city) {
				this.recommendTravels = []
				this.categoryActive = index;
				this.citys = city
				currentPage2 = 1
				this.getPeripheryLsit(this.citys)
				// this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[index]//防止两次相等造成点击不触发滚动时间
			},
			goToTravel:function(id){
				uni.navigateTo({
					url:'/pages/traffic/service/serviceDetail?id=' + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},

		},
		
	}
</script>

<style lang="scss">
	.peripheryplay-image{
		width:100%;
		height: 343upx;
	}
	.peripheryplay-text{
		background: linear-gradient(0deg,rgba(0, 0, 0, 0.89) 0%, rgba(0, 0, 0, 0) 100%);
		font-family: PingFang-SC-Bold;
		font-size: 32upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 2upx;
		color: #ffffff;
		position: absolute;
		padding: 0 0 14upx 17upx;
		left:0;
		bottom: 0;
		width: 100%;
		line-height: 38upx;
	}
	.page-body {
			// display: flex;
			background: #fff;
			height: 100%;
			overflow: hidden;
		}

		.nav {
			display: flex;
			width: 100%;
		}

		.nav-left {
			width: 25%;
			background: #fff;
			padding-top: 20upx;
		}

		.nav-left-item {
			height: 100upx;
			background: #FFFFFF;
			// border-right: solid 1upx #f1f1f1;
			// border-bottom: solid 1upx #f1f1f1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC-Medium;
			font-size: 30upx;
			font-weight: 500;
			font-stretch: normal;
			letter-spacing: 2upx;
			color: #666666;
		}
		.nav-left-item:last-child{
			border-bottom: none;
		}
		.nav-right {
			background: #FCFCFC;
			padding: 20upx 25upx 0 0;
			width: 75%;
			// overflow: hidden;
			height: 100%;
		}
		.box {
			height: 187upx ;
			border-radius: 6upx;
			background:rgba(255,255,255,1);
			box-shadow:0px 1upx 10upx 1upx rgba(9,30,57,0.07);
			overflow: hidden;
			font-size: 34upx;
			margin-bottom: 30upx;
			width: 100%;
			border-left: 3px solid #0092FF;
			padding: 20upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			// border-bottom: 20upx solid #fff;
			/* min-height: 100vh; */ 
			/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
			.title text:first-child{
				font-size: 36upx;
				color: #333;
				font-weight: bold;
				font-family: PingFang-SC-Bold;
			}
			.title text:last-child{
				margin-left: 4upx;
				background:rgba(234,234,242,1);
				border-radius:6upx;
				font-size: 24upx;
				padding:2upx 14upx 2upx 14upx;
				color: #666;
				font-weight: 500;
			}
			
			.luduan{
				font-size: 24upx;
				font-family: PingFang-SC-Medium;
				// font-weight: me;
				color: #333;
			}
			.fangxiang{
				color: #666;
				font-size: 24upx;
				font-family: PingFang-SC-Medium;
			}
		}
		.nav-right-item {
			width: 28%;
			height: 220upx;
			float: left;
			text-align: center;
			padding: 11upx;
			font-size: 28upx;
			background: #fff;
		}

		.nav-right-item image {
			width: 150upx;
			height: 150upx;
		}

		.active {
			font-family: PingFang-SC-Bold;
			font-size: 30upx;
			font-weight: 500;
			font-stretch: normal;
			line-height: 10upx;
			letter-spacing: 2upx;
			color: #fff;
			height: 60upx;
			background: #0092ff;
			// border-right: 0;
			border-radius: 0 29upx 29upx 0;
			width: 150upx;
			// border-left: 3px solid #0092ff;
		}
	::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
	   width: 0;
	   height: 0;
	   color: transparent;
	}
</style>